<template>
  <div class="execution">
    <basic-container>
      <div class="search-box">
        <el-form ref="searchForm" :inline="true" :model="searchForm">

          <el-form-item label="接入项目名称" prop="sysCode">
            <el-select v-model="searchForm.inSysName" @change="getGroupListBySysCode" placeholder="接入项目名称">
              <el-option v-for="item in sysList" :key="item.code" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="服务名称" prop="groupCode">
            <el-select v-model="searchForm.groupCode" placeholder="服务名称">
              <el-option v-for="item in groupList" :key="item.code" :label="item.name"
                         :value="item.code"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchChangeSelf">搜 索</el-button>
            <el-button type="default" icon="el-icon-delete" @click="searchReset">清 空</el-button>
          </el-form-item>

        </el-form>
      </div>

      <avue-crud
        ref="crud"
        :option="option"
        :data="tableList"
        :table-loading="tableLoading"
        :page="page"
        @on-load="getList"
        @refresh-change="refreshChange"
        @search-change="searchChange"
        @search-reset="searchReset"
        @size-change="sizeChange"
        @current-change="currentChange"
      >
        <template slot="menuLeft">
          <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
        </template>
        <template slot="menu" slot-scope="scope">
          <el-button v-if="permissionBtn.pre_msg_edit" type="text" size="small" icon="el-icon-edit" @click="handleEdit(scope.row, scope.index)">查看详情</el-button>
          <el-button v-if="permissionBtn.pre_msg_del" type="text" size="small" icon="el-icon-delete" @click="handleDelete(scope.row, scope.index)">删除</el-button>
        </template>
      </avue-crud>

      <!-- 详情 -->
      <Detail :visible.sync="visible" :searchData="searchData" @update="refreshChange"></Detail>
    </basic-container>
  </div>
</template>
<script>
  import { fetchList, putObj, delObj } from '@/api/pre/code'
  import { getSysList } from '@/api/pre/insystem'
  import { getGroupList,getGroupListBySysCode } from '@/api/pre/group'
  import { option } from '@/const/crud/pre/code'
  import { mapGetters } from 'vuex'
  import Detail from './detail'
  import MenuTree from '@/components/menu-tree/main'

  export default {
    name: 'Code',
    components: {
      MenuTree,
      Detail
    },
    data() {
      return {
        option: option,
        tableList: [],
        tableLoading: false,
        searchForm: {
          sysCode: '',
          groupCode: '',
        },
        page: {
          total: 0,
          currentPage: 1,
          pageSize: 20
        },

        visible: false,
        search: {
          sys: '',
          group: ''
        },
        searchData: {},
        sysList: [],
        groupList: [],
        rules: {
          sys: [{ required: true, message: '项目名称不能为空' }],
          group: [{ required: true, message: '服务名称不能为空' }]
        },

        optionTree: {},
        formList: [
          {
            label: 'test',
            type: 'input'
          }
        ],

      }
    },
    computed: {
      ...mapGetters(['permissions']),
      permissionBtn() {
        return {
          pre_msg_edit: this.permissions['pre_msg_edit'],
          pre_msg_add: this.permissions['pre_msg_add'],
          pre_msg_del: this.permissions['pre_msg_del'],
          pre_msg_copy: this.permissions['pre_msg_copy']
        }
      }
    },
    created() {
      this.getSysList()
    },

    methods: {
      getSysList() {
        getSysList().then(res => {
          this.sysList = res.data.data
        })
      },
      getGroupListBySysCode(value) {
        return getGroupListBySysCode(value).then(res => {
          this.searchForm.groupCode = ''
          this.groupList = []
          this.groupList = res.data.data
          if (this.groupList.length && !this.searchForm.groupCode) {
            this.searchForm.group = this.groupList[0].groupCode
          }
          for (var i = 0; i < this.sysList.length; i++) {
            if (this.sysList[i].code == this.searchForm.sysCode) {
              // this.searchForm.sysName = this.sysList[i].name
            }
          }
        })
      },
      getGroupList() {
        getGroupList({ sysCode: this.search.sys.sysCode }).then(res => {
          this.groupList = res.data.data
          if (this.groupList.length) {
            this.search.group = this.groupList[0].groupCode
          }
        })
      },
      dialogClosed() {
        this.$refs.searchForm.resetFields()
      },

      getList(page, params) {
        this.tableLoading = true
        fetchList(
          Object.assign(
            {
              current: page.currentPage,
              size: page.pageSize
            },
            params,
            this.searchForm
          )
        ).then(response => {
          this.tableList = response.data.data.records
          this.page.total = response.data.data.total
          this.tableLoading = false
        })
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      currentChange(current) {
        this.page.currentPage = current
      },
      refreshChange() {
        this.getList(this.page)
      },
      searchChange(param, done) {
        this.searchForm = param
        this.page.currentPage = 1
        this.getList(this.page, param)
        done()
      },
      searchChangeSelf(){
        this.page.currentPage = 1
        this.getList(this.page, this.searchForm)
      },
      handleAdd() {
        this.visible = true
        this.searchData = {}
      },
      //查看详情
      handleEdit(row, index) {
        this.visible = true
        this.searchData.groupCode = row.groupCode
        this.searchData.transCode = "input"
        this.searchData.pktId = row.pktId
        this.searchData.sysCode = row.systemCode
      },

      //删除
      handleDelete: function(row, index) {
        this.$confirm('是否确认删除' + row.inSysName + '的交易码配置？', '提示', {
          type: 'warning'
        })
          .then(() => {
            return delObj(row.pktId)
          })
          .then(res => {
            this.$message.success('删除成功')
            this.refreshChange()
          })
          .catch(() => {})
      },
      searchReset() {
        this.searchForm = {
          sysCode: '',
          groupCode: '',
        }
        this.page.currentPage = 1
        this.getList(this.page)
      },
      getTodoById: function(state) {
        function f(id) {
          return state.todos.find(todo => todo.id === id)
        }
      }
    }
  }
</script>
